<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>星语桥·SignFlow</title>
    <link rel="stylesheet" href="/css/common.css" />
    <link rel="stylesheet" href="/css/index.css" />
    <!-- MediaPipe库 -->
    <script src="/js/libs/mediapipe/hands.js"></script>
    <script src="/js/libs/mediapipe/drawing_utils.js"></script>
    <script src="/js/libs/mediapipe/camera_utils.js"></script>
  </head>
  <body>
    <nav class="navbar">
      <div class="nav-brand">星语桥·SignFlow</div>
      <div class="nav-links">
        <a href="/user/index.html" class="active">首页</a>
        <a href="/user/reference.html">手语参考</a>
        <a href="/user/about.html">关于</a>
        <a href="/user/profile.html">个人中心</a>
      </div>
      <div class="nav-user">
        <span id="username"></span>
        <button onclick="logout()">退出</button>
      </div>
    </nav>

    <div class="main-container">
      <!-- 左侧文字输入区域 -->
      <div class="input-container">
        <div class="input-header">
          <h3>文字输入</h3>
        </div>
        <div class="input-content">
          <textarea
            id="textInput"
            class="text-input"
            placeholder="请输入要翻译的文字..."
          ></textarea>
        </div>
      </div>

      <!-- 中间内容区域 -->
      <div class="content-container">
        <!-- 控制按钮区域 -->
        <div class="control-buttons">
          <button id="startCamera" class="control-button">开启摄像头</button>
          <button id="voiceInput" class="control-button">
            <span class="button-text">按住说话</span>
          </button>
        </div>

        <!-- 视频/摄像头显示区域 -->
        <div class="display-container">
          <!-- 摄像头视图 -->
          <div id="cameraView" class="view-area" style="display: none">
            <video id="cameraVideo" autoplay playsinline></video>
          </div>
          <!-- 手语视频播放 -->
          <div id="videoView" class="view-area">
            <div id="videoContainer" class="video-container">
              <video id="signVideo" controls>
                <source src="" type="video/mp4" />
                您的浏览器不支持视频播放
              </video>
              <!-- 视频控制按钮将通过JavaScript动态添加 -->
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧识别结果 -->
      <div class="result-container">
        <div class="result-header">
          <h3>识别结果</h3>
        </div>
        <div class="result-content" id="recognitionResult">
          <!-- 识别结果将通过 JavaScript 动态显示 -->
        </div>
        <!-- 匹配的手语列表 -->
        <div class="matches-header">
          <h3>匹配手语</h3>
        </div>
        <div class="matches-list" id="keywordsList">
          <!-- 匹配列表将通过 JavaScript 动态加载 -->
        </div>
      </div>
    </div>

    <script src="/js/user/sign.js"></script>
    <script src="/js/user/index.js"></script>
  </body>
</html>
